<template>
  <u-navbar
    autoBack
    placeholder
    height="44px"
  >
    <template #left>
      <i class="iconfont icon-shouyelogo" style="font-size: 110rpx;"></i>
    </template>
  </u-navbar>
  <view class="app-container">
    <view class="mb16" @click="handleNavigateTo('/pagesA/search/index')">
      <u-search class="mb16" placeholder="日照香炉生紫烟" :showAction="false" disabled></u-search>
    </view>
    <u-swiper
      :list="list"
      height="120rpx"
    ></u-swiper>
    <u-sticky bgColor="#fff" :offset-top="44 + useUser.statusBarHeight">
      <u-tabs :list="tabsList" lineColor="#966BFF" :current="state.current" @change="changeTabs"></u-tabs>
    </u-sticky>
    <block v-if="state.current === 0 || state.current === 1">
      <Dynamic         
        v-for="item in dynamicList" 
        :key="item.id"
        :community="item" />
    </block>
    <block v-if="state.current === 2">
      <Residential 
      />
    </block>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserPinia } from '@/store//modules/user';
import { onLoad } from '@dcloudio/uni-app';
import { handleNavigateTo } from '@/plugins/uniApp';
import { getDynamicList } from '@/api/dynamic';
import { getCommunityList } from '@/api/community'
import Dynamic from '@/components/Dynamic/index.vue';
import Residential from '@/components/Residential/index.vue';

import type { communityTypes, communityItemTypes } from '@/types/dynamic'

const useUser = useUserPinia();

const list = ref([
  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper3.png'
]);

const tabsList = ref([
  { name: '推荐' },
  { name: '所在小区' },
  { name: '附近小区' },
]);

const dynamicList = ref<communityItemTypes[]>([])

const state = ref({
  current: 0
})

const communityList = ref([])

onLoad(() => {
  getDynamic();
})

const changeTabs = ({ index }: { index: number }) => {
  if (index !== 2) {
    getDynamic();
  } else {
    getCommunity()
  }
  state.value.current = index;
}

const getDynamic = () => {
  getDynamicList({
    page: 1,
    per_page: 10
  }).then(res => {
    dynamicList.value = res.data
    console.log(res)
  })
}

const getCommunity = () => {
  getCommunityList({
    page: 1,
    per_page: 10
  }).then(res => {
    
  })
}

</script>

<style lang="scss" scoped>

</style>
